<template>
  <div class="mod-config">
    <div v-if="member">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="search()" ref="dataForm">
        <el-form-item label="季度：">
          <el-select v-model="dataForm.hasLabel" placeholder="请选择">
            <el-option
              v-for="item in useroption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="会员身份：">
          <el-select v-model="dataForm.label" placeholder="请选择">
            <el-option
              v-for="item in useroption1"
              :key="item.id"
              :label="item.labelName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运营评价结果：">
          <el-select v-model="dataForm.level" placeholder="请选择">
            <el-option
              v-for="item in useroption2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.nickname" placeholder="昵称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="dataForm.phone" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search()">查询</el-button>
          <el-button type="primary"  @click="download">下载数据</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        style="width: 100%;"
      >
        <el-table-column prop="id" header-align="center" align="center" label="季度考核结果排序"></el-table-column>
        <el-table-column prop="id" header-align="center" align="center" label="昵称"></el-table-column>
        <el-table-column header-align="center" align="center" label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.avatar" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="phone" header-align="center" align="center" label="手机号"></el-table-column>
        <el-table-column prop="bookId" header-align="center" align="center" label="会员身份">
          <template slot-scope="scope">
            {{ scope.row.hasLabel === 1?'总监':'' }}
            {{ scope.row.hasLabel === 0?'经理':'' }}
          </template>
        </el-table-column>
        <el-table-column prop="currentPoint" header-align="center" align="center" label="价值观总得分"></el-table-column>
        <el-table-column prop="totalPoint" header-align="center" align="center" label="服务评价总得分"></el-table-column>
        <el-table-column prop="lastMonthPoint" header-align="center" align="center" label="自评"></el-table-column>
        <el-table-column prop="level" header-align="center" align="center" label="评价管家"></el-table-column>
        <el-table-column prop="level" header-align="center" align="center" label="运营评价结果"></el-table-column>
        <el-table-column prop="level" header-align="center" align="center" label="本月提现服务系数"></el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" label="评价结果" width="80px">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="lookResult(scope.row.userId, 1)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" label="提现服务系数" width="80px">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="updateNum(scope.row.userId, 1)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>

      <!--提现服务系数s-->
      <el-dialog
        :close-on-click-modal="false"
        :visible.sync="visible1"
        title="选择标签"
      >
        <el-form
          :model="dataForm1"
          ref="dataForm1"
          label-width="150px"
          :rules="rules"
        >
          <el-form-item label="请选择标签:" prop="radio">
            <el-radio-group v-model="dataForm1.radio">
              <el-radio :label="1">修改本季度</el-radio>
              <el-radio :label="2">修改本月</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="提现服务系数:" prop="input">
            <el-input v-model="dataForm1.input"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible1 = false">取消</el-button>
          <el-button type="primary" @click="setLabel">确定</el-button>
        </span>
      </el-dialog>
      <!--提现服务系数e-->
    </div>
  </div>
</template>

<script>
  import QRCode from "qrcode";
  export default {
    data() {
      return {
        member: true,
        visibleIntegralList: false,
        dataForm1: {
          radio: '',
          input: ''
        },
        rules: {
          labelIds: [
            { required: true, message: '请选择标签', trigger: 'blur' }
          ],
        },
        zanConfig: 0,
        visible1: false,
        useroption: [
          {
            value: null,
            label: '全部'
          },
          {
            value: '0',
            label: '第一季度（1月-3月）'
          },
          {
            value: '1',
            label: '第二季度（4月-6月）'
          },
          {
            value: '2',
            label: '第三季度（7月-9月）'
          },
          {
            value: '3',
            label: '第四季度（10月-12月）'
          }
        ],
        useroption1: [
          {
            value: null,
            label: '全部'
          },
          {
            value: '0',
            label: '经理'
          },
          {
            value: '1',
            label: '总监'
          },
        ],
        useroption2: [
          {
            value: null,
            label: '全部'
          },
          {
            value: '1',
            label: '已评'
          },
          {
            value: '2',
            label: '未评'
          }
        ],
        dataForm: {
          reviewState: null,
          isPublic: '1',
          label: null
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        appLabel: [],
        visibleResource: false,
        forbidDetail: {},
        actionImages: [],
      }
    },
    components: {
    },
    activated() {
      this.getDataList()
    },
    methods: {
      search() {
        this.pageIndex = 1
        this.getDataList()
      },
      // 获取数据列表
      getDataList() {
        // this.dataListLoading = true
        this.dataForm.page = this.pageIndex
        this.dataForm.limit = this.pageSize
        this.$http({
          url: this.$http.adornUrl('/point/userRewardPoint/list'),
          method: 'get',
          params: this.$http.adornParams(this.dataForm)
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$refs['dataForm'].resetFields()
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      setLabel() {
        const obj = {
          userId: this.dataForm1.userId
        }
        const obj1 = {
          eveluateNum : '1'
        }
        this.$refs['dataForm1'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/point/userRewardPoint/saveOrUpdateLabel'),
              method: 'get',
              params: this.$http.adornParams(obj)
            }).then(({ data }) => {
              if (data && data.code === 0) {
                this.visible1 = false
                this.$message.success('操作成功')
                this.search()
              }
            })
          } else {
            return false;
          }
        });
      },
      updateNum() {
        this.visible1 = true
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 新增 / 修改
      lookOrCheck(id) {
        this.member = false
        this.$nextTick(() => {
          this.$refs.integralList.initIntegral(id)
        })
      },
      download() {
        this.dataForm.page = this.pageIndex
        this.dataForm.limit = this.pageSize
        this.$http({
          url: this.$http.adornUrl("/point/userRewardPoint/download"),
          method: "get",
          params: this.$http.adornParams(this.dataForm),
          headers: {
            "Content-Type": "application/json; application/octet-stream"
          },
          responseType: "arraybuffer"
        }).then(({ data }) => {
          const blob = new Blob([data], { type: "application/vnd.ms-excel" });
          const downloadElement = document.createElement("a");
          const href = window.URL.createObjectURL(blob);
          downloadElement.href = href;
          downloadElement.download = "会员积分列表.xls";
          document.body.appendChild(downloadElement);
          downloadElement.click();
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        });
      }
    }
  }
</script>
<style>
  .margin_10{
    margin-bottom: 10px;
  }
  .text_r{
    text-align: right;
    padding-right: 15px;
  }
  .inineBlock{
    display: inline-block;
  }
  img{
    width: 100%;
    height: auto;
  }
  .imgList{
    display: flex;
    flex-wrap: wrap;
  }
  .imgList>div{
    width: 80px;
    margin: 5px 15px 5px 0;
  }
</style>
